<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
			html,body{font-size:16px;height:100%;}
			.apply {
			    background: #181e72 url(…vf7irs7D9Ja+neGNn6Wzsh+lY9coQqIVqohCoqIViohCFRCEK9CEIQhCFVXIVULbEL/g5//9k=) no-repeat;
			    background-size: 100%;
             }
             .apply .switch-area {
			    margin: 0 auto;
			    width: 18.75rem;
			    position: relative;
			    height: 7.375rem;
			    margin-bottom: 1.125rem;
			}
			.apply .switch-area .tab {
			    position: absolute;
			    width: 6.625rem;
			    height: 3.9375rem;
			}
			.apply .switch-area .one {
    		    background: url(https://res.mall.10010.cn/mall/wow/static/images/tencent/head-card/images/tian-center.png?b3bc092…) 0 0 no-repeat;
    			background-size: 100%;
			}
			.apply .switch-area .one, .apply .switch-area .three {
			    position: absolute;
			    width: 8.125rem;
			    height: 5.125rem;
			    -webkit-border-radius: .375rem;
			    -moz-border-radius: .375rem;
			    border-radius: .375rem;
			}
			.apply .switch-area .two {
			    position: absolute;
			    width: 11.875rem;
			    height: 7.5rem;
			    background: url(https://res.mall.10010.cn/mall/wow/static/images/tencent/head-card/images/big-center.png?c04d0b1…) 0 0 no-repeat;
			    background-size: 100%;
			    -webkit-border-radius: .375rem;
			    -moz-border-radius: .375rem;
			    border-radius: .375rem;
			}
			.apply .switch-area .three {
			    background: url(https://res.mall.10010.cn/mall/wow/static/images/tencent/head-card/images/di-center.png?0872f4d…) 0 0 no-repeat;
			    background-size: 100%;
			    -webkit-box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    box-sizing: border-box;
			}
			.apply .switch-area .tab.center {
			    width: 11.875rem;
			    height: 7.5rem;
			    z-index: 10;
			    top: 0;
			    left: 3.5625rem;
			}
			.apply .switch-area .tab.left {
			    top: 1.5rem;
			    width: 8.125rem;
			    height: 5.125rem;
			    left: -.5625rem;
			    z-index: 4;
			}
			.apply .switch-area .tab.right {
			    z-index: 4;
			    top: 1.5rem;
			    width: 8.125rem;
			    height: 5.125rem;
			    left: 11.25rem;
			}
			.apply .switch-area .down {
    			 z-index: 0;
			}
			.apply .switch-area .tab.transition {
			    -webkit-transition-timing-function: ease-out;
			    -moz-transition-timing-function: ease-out;
			    -o-transition-timing-function: ease-out;
			    transition-timing-function: ease-out;
			    -webkit-transition: all .5s;
			    -o-transition: all .5s;
			    -moz-transition: all .5s;
			    transition: all .5s;
			}
		</style>
	</head>
	<body>
		<section class="apply" id="desc">
			<div class="switch-area">
				<div class="switch cf">
					<div class="tab one transition left " data-type="3"></div>
					<div class="tab two transition center checked " data-type="0"></div>
					<div class="tab three transition right" data-type="4"></div>
				</div>
			</div>
			<!--<div class="btn-box">
				<a id="apply" href="javascript:;" class="btn">免费申请</a>
			</div>-->
		</section>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(".tab").click(function(){//三个图
				var target = $(this);
				if(target.hasClass("right")){
					if(target.attr("data-type")==="4"){
						target.removeClass("right").addClass("center checked")
						.prev().removeClass("center checked ").addClass("left down")
						.prev().removeClass("left down").addClass("right");
					}else if(target.attr("data-type")==="3"){
						target.removeClass("right").addClass("center checked")
						.next().next().removeClass("center checked").addClass("left down")
						.prev().removeClass("left down").addClass("right");
					}else{
						target.removeClass("right").addClass("center checked")
						.prev().removeClass("center checked ").addClass("left down")
						.next().next().removeClass("left down").addClass("right");
					}
				
				}else if(target.hasClass("left")){
					if(target.attr("data-type")==="3"){
						target.removeClass("left").addClass("center checked")
						.next().removeClass("center checked ").addClass("right down")
						.next().removeClass("right down").addClass("left");
					}else if(target.attr("data-type")==="4"){
						target.removeClass("left").addClass("center checked")
						.prev().prev().removeClass("center checked down").addClass("right down")
						.next().removeClass("right down").addClass("left");
					}else{
						target.removeClass("left").addClass("center checked")
						.next().removeClass("center checked ").addClass("right down")
						.prev().prev().removeClass("right down").addClass("left");
					}
				}else{
					
				}
			})
			
			
			
//			$(".tab").click(function(){//两张图
//				var target = $(this);
//				if(target.hasClass("right")){
//					if(target.attr("data-type")==="4"){
//						target.removeClass("right").addClass("center checked")
//						.prev().removeClass("center checked ").addClass("left down")
//						.prev().removeClass("left down").addClass("right");
//					}else if(target.attr("data-type")==="0"){
//						 target.removeClass("right").addClass("center checked")
//						.prev().removeClass("center checked ").addClass("left down")
//						.next().next().removeClass("left down").addClass("right");
//					}else{
//						
//					}
//				
//				}else if(target.hasClass("left")){
//					 if(target.attr("data-type")==="4"){
//						target.removeClass("left").addClass("center checked")
//						.prev().prev().removeClass("center checked down").addClass("right down")
//						.next().removeClass("right down").addClass("left");
//					}else if(target.attr("data-type")==="0"){
//						target.removeClass("left").addClass("center checked")
//						.next().removeClass("center checked ").addClass("right down")
//						.prev().prev().removeClass("right down").addClass("left");
//					}else{
//						
//					}
//				}else{
//					
//				}
//			})
		</script>
	</body>
</html>
